<template>
    <div class="content">
        <div>
            <h1>购物车</h1>
            <div class="contents">
                <img src="/images/cart/icon-16.png" alt="">
                <p>您的购物车里什么都没有哦~</p>
                <router-link to="/login">
                    <el-button>立即登录</el-button>
                </router-link>
                <router-link to="/">
                    <el-button type="primary">去逛一逛</el-button>
                </router-link>
            </div>
        </div>

        <!-- <div>
            <div class="tailSc">
                <span>商品推荐</span>
            </div>

            <div class="tailSp">
                <ul>
                    <li v-for="(item,index) in data.list" :key="index">
                        <img :src="item.url" alt="">
                        <p>{{item.text}}</p>
                        <span>{{item.mach}}</span>
                    </li>
                </ul>
            </div>
        </div> -->

        <div class="tail">
            <div class="tailSc">
                <span>商品推荐</span>
            </div>
            <div class="tailSp">
                <ul>
                    <li v-for="(item,index) in recommend" :key="index">
                        <router-link :to="{name:'Product',query:{id:item.id}}">
                            <img :src="item.mainimage" alt="">
                            <div class="tent">
                                <p>{{ item.title}}</p>
                                <span>￥{{ item.price }}.00</span>
                            </div>
                        </router-link>
                    </li>
                </ul>

            </div>
        </div>











    </div>
</template>


<style lang="less" scoped>




a:hover {
    text-decoration: none !important;
}
.content{
width: 1200px;
margin-left:150px;
h1{
    font-size: 18px;
    padding-top:100px ;
    padding-bottom: 10px;
    font-weight:600 ;
}
.contents{
    height: 400px;
    border-top:1px solid #ccc ;
    border-bottom: 1px solid #ccc;
    text-align: center;
    padding-top:80px ;
    p{
        color: #ccc;
        margin-bottom: 30px;
    }
    span{
        color: white;
    }
        .el-button{
            margin:0 10px;
        }
}


// .tailSc{
//     margin-top:80px ;
//     margin-bottom: 30px;
//     span{
//         font-size:18px;
       
//     }
// }
// .tailSp{
//     margin-bottom:100px ;
    
//     ul{
       
//      display: flex;
//     justify-content: space-between;
//     li{
//         border: 1px solid #ccc;
//         width: 220px;
//         height: 260px
//     }
//     }
   
// }
}
.tail {
    position: relative;
    top: 50px;

    .tailSc {
        margin: 30px;

        span {
            font-size: 24px;
        }
    }
    .tailSp {
        padding-bottom: 150px;
        ul {
            display: flex;
            justify-content: space-between;
            li {
                width: 230px;
                font-size: 16px;
                img {
                    width: 100%;
                    background: rgb(245, 245, 245);
                }
                &:hover {
                    box-shadow: 0 2px 7px 0 rgb(0 0 0 / 10%);
                }
                //
                .tent {
                    padding: 15px 10px;

                    p {
                        height: 40px;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        width: 100%;
                        margin-bottom: 20px;
                    }

                    span {
                        color: deepskyblue;
                        font-size: 18px;
                    }
                }
            }
        }
    }
}
</style>



<script setup>
import { ref, reactive, getCurrentInstance,onMounted} from 'vue'
    
const { proxy } = getCurrentInstance();  
    
    let data =reactive({
        list: [],

    })
//推荐商品遍历 后端遍历拿值
let recommend = ref()
onMounted(() => {
    proxy.$get("/api/data/recommend").then((data) => {
        recommend.value = data;
        // console.log(recommend.value);
    })
})
</script>